<template>
  <div>
    <div class="overflow-hidden">
      <Button class="float-right" v-per="'onBoard'" v-if="userType === 0" @click="addApp" type="primary"
        >上架应用
      </Button>
    </div>
    <Card ref="cardRef" @edit="handleEdit" />
    <EditDrawer :operation="operation" :appId="appId" @success="refreshCard" ref="editDrawerRef" />
    <Modal @uploadSuccess="refreshCard" :appId="appId" :logoLink="logoLink" ref="modalRef" />
    <CompDrawer ref="compDrawerRef" />
    <MirrorDrawer ref="mirrorDrawerRef" />
    <AppInfoDrawer ref="appInfoDrawer" :appId="appId" />
    <ModuleDrawer ref="moduleDrawerRef" :type="2" />
    <AppDrawer ref="appDrawerRef" />
    <IntegrateDrawer ref="integrateDrawerRef" />
    <BasicModal ref="basicModalRef"></BasicModal>
    <ComponentRelationshipDrawer ref="crsDrawerRef"></ComponentRelationshipDrawer>
  </div>
</template>

<script setup lang="ts">
import Card from '/@/views/system-mgmt/app-mgmt/card/index.vue';
import EditDrawer from './drawer/edit.vue';
import CompDrawer from './drawer/compMgmt.vue';
import MirrorDrawer from './drawer/compNewMirror.vue';
import ModuleDrawer from './drawer/moduleMgmt.vue';
import AppDrawer from './drawer/appMgmt.vue';
import Modal from './modal/index.vue';
import { Button } from 'ant-design-vue';
import AppInfoDrawer from './drawer/appInfo.vue';

import { nextTick, ref } from 'vue';
import { useMessage } from '/@/hooks/web/useMessage';
import { deleteApp, unsubscribeApp } from '/@/api/system-mgmt/app-mgmt/app';
import { useUserStoreWithout } from '/@/store/modules/user';
import { router } from '../../../router/index';
import BasicModal from '/@/views/system-mgmt/app-mgmt/modal/BasicModal.vue';
import IntegrateDrawer from '/@/views/system-mgmt/app-mgmt/drawer/integrateMgmt.vue';
import ComponentRelationshipDrawer from '/@/views/system-mgmt/app-mgmt/drawer/componentRelationshipMgmt.vue';

const basicModalRef = ref('basicModalRef');
const integrateDrawerRef = ref('integrateDrawerRef');
const editDrawerRef = ref('editDrawerRef');
const modalRef = ref('modalRef');
const appDrawerRef = ref('appDrawerRef');
const cardRef = ref('cardRef');
const compDrawerRef = ref('compDrawer');
const moduleDrawerRef = ref('moduleDrawerRef');
const mirrorDrawerRef = ref('mirrorDrawerRef');
const appInfoDrawer = ref('appInfoDrawer');
const crsDrawerRef = ref('crsDrawerRef');
const userStore = useUserStoreWithout();
const tenantCode = userStore.getUserInfo?.tenantCode;
const appId = ref('');
const logoLink = ref('');
const operation = ref<'update' | 'add' | undefined>('');
const userType = userStore.getUserInfo?.userType;

const addApp = () => {
  operation.value = 'add';
  editDrawerRef.value.openDrawer();
};

const { createMessage, createConfirm } = useMessage();

function clearAppId() {
  appId.value = '';
}

function refreshCard() {
  clearAppId();
  cardRef.value.getAppList();
}

const openCompDrawer = (params: any) => {
  compDrawerRef.value.openDrawer(params.appId);
};

// eslint-disable-next-line max-lines-per-function
async function handleEdit(params) {
  const type = params.typeNo ? params.typeNo : params;
  switch (type) {
    case 'edit':
      appId.value = params.appId;
      operation.value = 'update';
      nextTick(() => {
        editDrawerRef.value.upgradeApp(params.isSubscribed);
      });
      break;
    case 'info':
      appId.value = params.appId;
      nextTick(() => {
        appInfoDrawer.value.openDrawer();
      });
      break;
    case 'delete':
      createConfirm({
        iconType: 'warning',
        title: '退订应用',
        okText: ' 确认',
        cancelText: '取消',
        content: '是否确认退订？',
        onOk: async () => {
          const res = await unsubscribeApp({
            appId: params.record.appId,
            tenantCode: tenantCode as string,
          });
          if (res) {
            createMessage.success('退订成功');
          } else {
            createMessage.error('退订失败');
          }
        },
      });
      break;
    case 'uploadImg':
      logoLink.value = params.logoLink;
      appId.value = params.appId;
      modalRef.value.openModal();
      break;
    case 'componentManagement':
      openCompDrawer(params);
      break;
    case 'componentRelationshipManagement':
      crsDrawerRef.value.openDrawer(params.appId);
      break;

    case 'subscribe':
      router.push({
        path: '/instancePurchase',
        query: {
          type: 'tenant',
          appId: params.appId,
          appName: params.appName,
        },
      });
      break;
    case 'componentMirror':
      mirrorDrawerRef.value.openDrawer(params.appId);
      break;
    case 'delist':
      createConfirm({
        iconType: 'warning',
        title: '下架应用',
        okText: ' 确认',
        cancelText: '取消',
        content: '是否下架应用？',
        onOk: async () => {
          const res = await deleteApp({ id: params.appId });
          if (res) {
            createMessage.success('下架成功');
          } else {
            createMessage.error('下架失败');
          }
          cardRef.value.getAppList();
        },
      });
      refreshCard();
      break;
    case 'module':
      moduleDrawerRef.value.openDrawer(params.appId);
      break;
    case 'app':
      appDrawerRef.value.openDrawer(params.appId);
      break;
    case 'authorization':
      basicModalRef.value.openModal('auth', params.appId, undefined);
      break;
    case 'synchronization':
      basicModalRef.value.openModal('sync', params.appId, undefined);
      break;
    case 'Integrate':
      integrateDrawerRef.value.openDrawer(params.appId);
      break;
  }
}
</script>
